<template>
<div class="stepsdemo-content">
    <Card>
        <template slot="title">
            座位信息
        </template>
        <template slot="subtitle">
            请选择您的座位
        </template>
        <template slot="content">
            <div class="p-fluid p-formgrid p-grid">
                <div class="p-field p-col-12 p-md-6">
                    <label for="class">等级</label>
                    <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="请选择等级" />
                </div>
                <div class="p-field p-col-12 p-md-6">
                    <label for="lastname">车厢</label>
                    <Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="请选择车厢" />
                </div>
                <div class="p-field p-col-12">
                    <label for="seat">座位</label>
                    <Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="请选择座位" />
                </div>
            </div>
        </template>
        <template slot="footer">
            <div class="p-grid p-nogutter p-justify-between">
                <Button label="返回" @click="prevPage()" icon="pi pi-angle-left" />
                <Button label="下一步" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
            </div>
        </template>
    </Card>
</div>
</template>

<script>
    export default {
        data () {
            return {
                selectedClass: '',
                classes: [
                    {name: '一等座', code: 'A', factor: 1},
                    {name: '二等座', code: 'B', factor: 2},
                    {name: '三等座', code: 'C', factor: 3}
                ],
                vagons: [],
                selectedVagon: '',
                seats: [],
                selectedSeat: ''
            }
        },
        methods: {
            setVagons(event) {
                if (this.selectedClass && event.value) {
                    this.vagons = [];
                    this.seats = [];
                    for (let i = 1; i < 3 * event.value.factor; i++) {
                        this.vagons.push({vagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
                    }
                }
            },
            setSeats(event) {
                if (this.selectedVagon && event.value) {
                    this.seats = [];
                    for (let i = 1; i < 10 * event.value.factor; i++) {
                        this.seats.push({seat: i, type: event.value.type});
                    }
                }
            },
            nextPage() {
                this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
            },
            prevPage() {
                this.$emit('prev-page', {pageIndex: 1});
            }
        }
    }
</script>